import React from "react";

import { NavLink } from "react-router-dom";
import PerfectScrollbar from "react-perfect-scrollbar";

import ChevronRightTwoToneIcon from "@material-ui/icons/ChevronRightTwoTone";
import VerifiedUserTwoToneIcon from "@material-ui/icons/VerifiedUserTwoTone";
import SettingsTwoToneIcon from "@material-ui/icons/SettingsTwoTone";
import EmojiEventsTwoToneIcon from "@material-ui/icons/EmojiEventsTwoTone";
import AccountBalanceTwoToneIcon from "@material-ui/icons/AccountBalanceTwoTone";
import AttachMoneyTwoToneIcon from "@material-ui/icons/AttachMoneyTwoTone";
import FilterListTwoToneIcon from "@material-ui/icons/FilterListTwoTone";
import SidebarUserbox from "./SidebarUserbox";

import { setSidebarToggleMobile } from "../../../stores/themeSlicer";
import { useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
import i18n from "i18next";
import { changeLocaleLng } from "../../../stores/localeSlicer";
import { Typography } from "@material-ui/core";

const SidebarMenu = () => {
  const dispatch = useDispatch();
  const toggleSidebarMobile = () => dispatch(setSidebarToggleMobile(false));
  const { t } = useTranslation();
  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
    dispatch(changeLocaleLng(lng));
  };

  return (
    <>
      <PerfectScrollbar>
        <SidebarUserbox userValid={false} isLogged={true} />
        <div className="sidebar-navigation">
          <div className="sidebar-header">
            <button onClick={() => changeLanguage("fa")}>fa</button>
            <button onClick={() => changeLanguage("en")}>en</button>

            <Typography
              variant="subtitle1"
              color="textPrimary"
              className="mt-1 menu-bar"
            >
              {t("sidebar:menubar")}
            </Typography>
          </div>
          <ul>
            <li>
              <NavLink
                onClick={() => toggleSidebarMobile}
                activeClassName="active"
                className="nav-link-simple font-size-xl"
                to="/Homepage"
              >
                <span className="sidebar-icon">
                  <EmojiEventsTwoToneIcon />
                </span>
                {t("sidebar:website_home")}
                <span className="sidebar-icon-indicator sidebar-icon-indicator-right">
                  <ChevronRightTwoToneIcon />
                </span>
              </NavLink>
            </li>
            <li>
              <NavLink
                onClick={() => toggleSidebarMobile}
                activeClassName="active"
                className="nav-link-simple font-size-xl"
                to="/Overview"
              >
                <span className="sidebar-icon">
                  <AccountBalanceTwoToneIcon />
                </span>
                {t("sidebar:my_wallets")}
                <span className="sidebar-icon-indicator sidebar-icon-indicator-right">
                  <ChevronRightTwoToneIcon />
                </span>
              </NavLink>
            </li>
            <li>
              <NavLink
                onClick={() => toggleSidebarMobile}
                activeClassName="active"
                className="nav-link-simple font-size-xl"
                to="/Transactions"
              >
                <span className="sidebar-icon">
                  <FilterListTwoToneIcon />
                </span>
                {t("sidebar:transactions")}
                <span className="sidebar-icon-indicator sidebar-icon-indicator-right">
                  <ChevronRightTwoToneIcon />
                </span>
              </NavLink>
            </li>

            <li>
              <NavLink
                onClick={() => toggleSidebarMobile}
                activeClassName="active"
                className="nav-link-simple font-size-xl"
                to="/BuySell"
              >
                <span className="sidebar-icon">
                  <AttachMoneyTwoToneIcon />
                </span>
                {t("sidebar:watch_list")}
                <span className="sidebar-icon-indicator sidebar-icon-indicator-right">
                  <ChevronRightTwoToneIcon />
                </span>
              </NavLink>
            </li>
            <li>
              <NavLink
                onClick={() => toggleSidebarMobile}
                activeClassName="active"
                className="nav-link-simple font-size-xl"
                to="/Settings"
              >
                <span className="sidebar-icon">
                  <SettingsTwoToneIcon />
                </span>
                {t("sidebar:my_banks_info")}
                <span className="sidebar-icon-indicator sidebar-icon-indicator-right">
                  <ChevronRightTwoToneIcon />
                </span>
              </NavLink>
            </li>
            <li>
              <NavLink
                onClick={() => toggleSidebarMobile}
                activeClassName="active"
                className="nav-link-simple font-size-xl"
                to="/Profile"
              >
                <span className="sidebar-icon">
                  <VerifiedUserTwoToneIcon />
                </span>
                {t("sidebar:edit_profile")}
                <span className="sidebar-icon-indicator sidebar-icon-indicator-right">
                  <ChevronRightTwoToneIcon />
                </span>
              </NavLink>
            </li>
          </ul>
        </div>
      </PerfectScrollbar>
    </>
  );
};

export default SidebarMenu;
